<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--er表达式${pageContext.request.contextPath}表示服务器路径打头部分--%>
<%--<form method="post" action="${pageContext.request.contextPath}/user/register">--%>
<div>
    <label>用户名</label>
    <input type="text" id="name" name="name" placeholder="请输入用户姓名">
    <label>账号</label>
    <input type="text" id="username" name="username" placeholder="请输入用户账号">
    <label>密码</label>
    <input type="password" id="password" name="password" placeholder="请输入用户密码">
    <br>
<%-- 文件上传标签--%>
    <input type="file" id="headImage" accept="image/*">
    <br>
    <input type="submit" value="提交" onclick="submit()">
    <input type="submit" value="多了一个权限按钮" onclick="submit1()">
    <input type="submit" value="上传文件按钮" onclick="submitFile()">
    </div>
<%--</form>ajax请求--%>
<script>
    function submit() {
        var nameValue = $("#name").val();
        var usernameValue = $("#username").val();
        var passwordValue = $("#password").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/User/ajaxRegister",
            type:'post',
            contentType:'application/x-www-form-urlencoded',
            data:{name:nameValue,username:usernameValue,password:passwordValue},
            dataType:'json',
            success:function (result) {  //result是一个js对象，期望服务器返回一个json格式的字符串
                alert(JSON.stringify(result));
            },
            error:function (err) {
                alert(JSON.stringify(err))
            }
        });
    }

    //这里是加了一个Role实体类
    function submit1() {
        var nameValue = $("#name").val();
        var usernameValue = $("#username").val();
        var passwordValue = $("#password").val();
        var roleValue = {id:2,name:"admin"};
        //有嵌套
        var userValue = {name:nameValue,username:usernameValue,password:passwordValue,role:roleValue};
        //转成user的字符串：
        var userString = JSON.stringify(userValue);
        $.ajax({
            url:"${pageContext.request.contextPath}/User/ajaxRegisterRole",
            type:'post',
            contentType:'application/json',
            data:userString,
            processData: false,//必要ajax去处理data这个参数
            dataType:'json',
            success:function (result) {  //result是一个js对象，期望服务器返回一个json格式的字符串
                alert(JSON.stringify(result));
            },
            error:function (err) {
                alert(JSON.stringify(err))
            }
        });
    }
//上传文件
    function submitFile() {
        var nameValue = $("#name").val();
        var usernameValue = $("#username").val();
        var passwordValue = $("#password").val();
        //jquery方法拿headImage这个文件
        var headImage = $("#headImage")[0].files[0];
        var formData = new FormData();
        formData.append("name",nameValue);
        formData.append("username",usernameValue);
        formData.append("password",passwordValue);
        formData.append("headImage",headImage);
        $.ajax({
            url:"${pageContext.request.contextPath}/User/ajaxFile",
            type:'post',//传送文件只能是post请求，只能用post，文件和大，get只能传小的文件
            contentType:false, //我们不指定文件类型
            processData: false,//让ajax内部自己类处理formData这个数据类型。
            data:formData,//这里直接传表单对象
            dataType:'json',
            success:function (result) {  //result是一个js对象，期望服务器返回一个json格式的字符串
                alert(JSON.stringify(result));
            },
            error:function (err) {
                alert(JSON.stringify(err))
            }
        });
    }
</script>
</body>
</html>
